/*
 * Colors
 */
@blue : #00b3e6;
@grey : #666;
@grey-light: #DDD;
@grey-dark : #444;


/*
 * Prototypes
 */

// box
.box {
    background: #FFF;
    border-radius: 2px;
    box-shadow: 0 0 3px rgba(0,0,0,0.2);

    header {
        background: @grey-dark;
        color: #FFF;
        padding: 8px 16px;
        margin: 0;
        font-size: 10px;
        font-weight: bold;
        border-radius: 2px 2px 0 0;
        text-transform: uppercase;
    }

    hgroup {
        padding-top: 10px;

        h1 {
            background: @grey-dark;
            color: @blue;
            font-weight: normal;
            font-size: 24px;
            padding: 9px 30px;
            margin: 0;
            margin-left: -5px;
            margin-right: -5px;
            border-radius: 2px;
            box-shadow: 0 0 4px rgba(0,0,0,0.2);
        }
    }

    .o-list {
        padding: 8px 16px;
        border-bottom: dashed 1px @grey-light;
        &:last-child {
            border-radius: 0 0 2px 2px;
            border-bottom: 0;
        }
    }

    .o-content {
        padding: 10px 25px;
        border-bottom: dashed 1px @grey-light;
        &:last-child {
            border-radius: 0 0 2px 2px;
            border-bottom: 0;
        }

        h2 {
            margin: 0;
            margin-bottom: -10px;
            margin-top: 30px;
            color: @blue;
            font-weight: normal;
            font-size: 18px;
            margin-left: 30px;

            &:first-child {
                margin-top: 10px;;
            }
        }

        p {
            text-align: justify;
            font-size: 13px;
            line-height: 22px;
            margin: 20px 0 20px 0;

            &:first-child {
                margin-top: 5px;
            }
            &:last-child {
                margin-bottom: 10px;
            }
        }

        code {
            background: #F7F7F7;
            border: 1px dotted @grey-light;
            display: block;
            border-radius: 2px;

            pre {
                margin: 0;
                padding: 0;
                padding-left: 15px;
            }
        }
    }

}

// Push
.push {
    background: @grey-dark;
    color: #FFF;
    padding: 8px 16px;
    margin: 0;
    font-size: 10px;
    font-weight: bold;
    border-radius: 2px;
    text-transform: uppercase;
    box-shadow: 0 0 3px rgba(0,0,0,0.2);
    border: 0;

    &.blur {
        background: lighten(@grey, 30%);
    }

    &:hover, &.selected {
        background: @blue;
        cursor: pointer;
    }
}
.pushgroup {
    text-align: right;

    .push {
        display: inline-block;
        margin-left: 5px;
    }
}


/*
 * Form
 */
form {

    label {
        display: inline-block;
        min-width: 40px;
    }

    input[type=text], textarea {
        border: 1px solid @grey-light;
        padding: 4px 6px;
        font-family: "Trebuchet MS";
        color: @grey;
        border-radius: 2px;
    }

    a {
        display: inline-block;
    }

}



/*
 * Front office
 */


/*
 * Home
 */
.list-home {
    float: left;
    margin-right: 25px;
    width: 360px;

    &.tiny {
        width: 180px;
        margin-right: 0;
    }

    article {
        border-left: 2px solid #FFF;

        &:hover {
            color: @blue;
            cursor: pointer;
            border-left: 2px solid @blue;
        }

        .title {
            font-size: 15px;
        }

        .info {
            font-size: 11px;
            color: #AAA;
        }
    }
}

.side-box {
    float: left;
    display: inline-block;
}


/*
 * Trick
 */
#side-info {
    float: right;
    width: 180px;

    #author {
        margin-bottom: 15px;
    }

    #actions a {
        display: block;
        margin-bottom: 5px;
    }
}

#trick {
    margin-right: 200px;

    h1 strong {
        font-weight: normal;
        color: #FFF;
    }

}

#comments {
    font-size: 13px;
    margin-right: 200px;
    margin-top: 20px;

    .box-item {
        padding: 15px 25px;
    }

    .avatar {
        height: 32px;
        width: 32px;
        background: @grey-light;
        float: left;
    }
    .username, .comment {
        margin-left: 45px;
    }
    .username {
        color: @blue;
    }
    .comment {
        text-align: justify;
    }
    time {
        float: right;
        color: #CCC;
        font-size: 11px;
    }
}

#comments-form {
    margin-right: 200px;
    margin-top: 20px;

    .avatar {
        #comments > .avatar;
    }

    textarea {
        display: block;
        height: 125px;
        margin-bottom: 5px;
        margin-left: 45px;
        width: 670px;
    }
}



/*
 * Back office
 */
#dash-menu {
    float: left;
    width: 150px;

    a {
        display: block;
        background: @grey-dark;
        color: #FFF;
        padding: 8px 16px;
        margin: 0;
        font-size: 10px;
        font-weight: bold;
        border-radius: 2px;
        text-transform: uppercase;
        margin-bottom: 5px;

        &:hover, &.selected {
            background: @blue;
        }

        span {
            float: right;
        }
    }
}

#dash-content {
    margin-left: 170px;

    table.listing {
        border-collapse: collapse;
        width: 100%;
        thead tr td {
            font-weight: bold;
            text-transform: uppercase;
            background: #F6F6F6;
            padding: 6px 20px;
            font-size: 10px;
        }
        tr td {
            padding: 12px 20px;
            border-bottom: 1px solid #EEE;
        }
    }

}


form.trick {

    .title {
        width: 685px;
    }

    .wysiwyg {
        border: 1px solid @grey-light;
        border-radius: 2px;

        .toolbar {
            background: @grey-light;

            span {
                display: inline-block;
                padding: 4px 8px;
                margin: 4px 6px;
                font-size: 10px;
                font-weight: bold;
                border-radius: 2px;

                &:hover {
                    background: @grey-dark;
                    color: @blue;
                    cursor: pointer;
                }
            }
        }

        .draft {
            height: 450px;
        }

    }

    .draft-info {
        color: lighten(@grey, 20%);
        margin-top: 6px;
        font-style: italic;
    }

}